<!DOCTYPE html>

<html>
<head>

  <meta charset="utf-8">
  <meta name="description" content="xswitch test">
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
  <meta itemprop="description" content="WebRTC test for IE">
  <!-- <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png"> -->
  <meta itemprop="name" content="xswitch test">
  <meta name="mobile-web-app-capable" content="yes">
  <meta id="theme-color" name="theme-color" content="#ffffff">

  <base target="_blank">

  <title>WebRTC test page for IE</title>

  <link rel="stylesheet" href="css/main_root.css" />
  <link rel="stylesheet" href="css/main.css" />

</head>

<body>
  <div id="container">

    <h1><a>Conference </a> <span>XSwitch HTTP Protocol Tester</span></h1>

    <video id="localVideo" autoplay muted playsinline webkit-playsinline ></video>
    <video id="remoteVideo" autoplay playsinline webkit-playsinline ></video>
    <canvas id = "localCanvas"> </canvas>
    <canvas id = "remoteCanvas"> </canvas>

    <div id="checks">
      <input class="checkInput" id="videoInCheck" type="checkbox" checked>Video-In</input>
      <input class="checkInput" id="videoOutCheck" type="checkbox" checked>Video-Out</input>
      <input class="checkInput" id="audioInCheck" type="checkbox" checked>Audio-In</input>
      <input class="checkInput" id="audioOutCheck" type="checkbox" checked>Audio-Out</input>
      <br />
      <input class="checkInput" id="offerRoleCheck" type="checkbox" checked>Offer-Role</input>
      <input class="checkInput" id="loopbackCheck" type="checkbox" >Loopback</input>
      <br />
    </div>

    <div id="buttons">
      <button id="joinButton">Join</button> 
      <button id="exitButton">Exit</button>


    </div>

    <div id="states" >
      
      <div style='display:none'>
        <div class="label">PC state:</div><div id="pcState" class="value"></div>
      </div>
      
      <div>
        <div class="label">PC ICE state:</div><div id="pcIceState" class="value"></div>
      </div>

      <div>
        <div class="label">Time:</div>  <div id="timeInfo" class="statistics" > </div>
      </div>

      <div>
        <div class="label">Sent:</div>  <div id="sentInfo" class="statistics" > </div>
      </div>

      <div>
        <div class="label">Recv:</div>  <div id="recvInfo" class="statistics" > </div>
      </div>

    </div>
    <div>
    <div id="stats"></div>
    </div>
    <div style='display:none'>
      <p>Local SDP</p>
      <textarea id="localSDP"></textarea>
      <p>Local Candidates</p>
      <textarea id="localCandidates"></textarea>

      <p>Remote SDP</p>
      <textarea id="answerSDP"></textarea>
      <p>Remote Candidates</p>
      <textarea id="answerCandidates"></textarea>
    </div>


  </div>

  <script src="js/adapter.tem.debug.js"></script>
  <script src="js/sdp-transform.js"></script>
  <script type="text/javascript" src="js/webrtchelper.js"></script>
  <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="js/streamvisualizer.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
